<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/clear.css">
    <link rel="stylesheet" href="../css/goods.css">
    <title>商品详情</title>
</head>

<body>
    <header>

    </header>
    <div class="goods-box">
        <div class="goods">
            <div class="goods-img">
                <!-- <img src="../img/4.webp"> -->
            </div>
            <div class="text">
                <span style="color:rgb(85,85,85);font-size: 22px;">紫砂壶</span><br>
                <div class="xian">
                </div>
                <span>￥500.00</span><br>

            </div>
            <div class="btn">
                <a href="cart.html"><input type="button" name="" id="" value="加入购物车" /></a>&nbsp;&nbsp;
                <input type="button" name="" id="" value="&nbsp;-&nbsp;" />
                <span>0</span>
                <input type="button" name="" id="" value="&nbsp;+&nbsp;" />
            </div>

            <!-- -->
            <!-- <div class="goodsImg">
                <img src="../img/4.webp">
            </div> -->
            <div id="small-box">
                <div id="mask">
                </div>
                <ul class="ul-img">
                    <li class="active"><img src="../img/4.webp"></li>
                </ul>
                <div id="big-box">

                </div>
            </div>


            <div class="goods-bianhao">
                <span>商品编号:000000&nbsp;&nbsp;</span>
            </div>
            <div class="goods-fenlei"><span>分类:&nbsp;</span>
                <a href="">美之器物,</a>
                <a href="">茶道</a>
            </div>
        </div>
        <div class="comment">
            <div class="cmt">
                <p style="font-weight: 700;">用户评论(0)</p>
            </div>
            <div class="xian2"></div>
            <div class="er">
                <span>目前还未有评论</span><br>
                <span>只有买过此商品的客户登录后才能发表评论</span>
            </div>
        </div>
        <h2>相关商品</h2>
        <div class="xg-goods">

            <div class="xgGoods">
                <dl>
                    <dt><img src="../img/5.webp"></dt>
                    <dd>
                        <p>老铁壶</p>
                        <p>￥1,999.00</p>
                    </dd>
                </dl>
            </div>
            <div class="xgGoods">
                <dl>
                    <dt><img src="../img/6.webp"></dt>
                    <dd>
                        <p>天目盏</p>
                        <p>￥300.00</p>
                    </dd>
                </dl>
            </div>
            <div class="xgGoods">
                <dl>
                    <dt><img src="../img/9.webp"></dt>
                    <dd>
                        <p>茶承</p>
                        <p>￥300.00</p>
                    </dd>
                </dl>
            </div>
            <div class="xgGoods">
                <dl>
                    <dt><img src="../img/10.webp"></dt>
                    <dd>
                        <p>茶洗</p>
                        <p>￥399.00</p>
                    </dd>
                </dl>
            </div>
        </div>
    </div>
    <footer>

    </footer>
</body>

</html>
<script src="../js/jQuery.js"></script>
<script>
    $("header").load("header.html");
    $("footer").load("footer.html");
</script>
<script>
    class MF {
        //构造方法中参数设计的思想:
        //凡是类中需要使用的HTML元素，全都设计为参数
        constructor(smallBox, mask, bigBox) {
            this.oSmallBox = smallBox;
            this.oMask = mask;
            this.oBigBox = bigBox;
            this.eventBind();
        }
        //移上去事件 
        onmouseover() {
            let that = this;
            //移上小盒子
            this.oSmallBox.onmouseover = function () {
                //kask出现
                that.oMask.style.display = "block";
                //大盒子出现
                that.oBigBox.style.display = "block";
            }
        }
        //鼠标移除
        onmouseout() {
            let that = this;
            //移上小盒子
            this.oSmallBox.onmouseout = function () {
                //kask消失
                that.oMask.style.display = "none";
                //大盒子消失
                that.oBigBox.style.display = "none";
            }
        }
        //鼠标
        onmousemove() {
            let that = this;
            this.oSmallBox.onmousemove = function (evt) {
                let e = evt || event;
                let left = e.pageX - this.offsetLeft - that.oMask.offsetWidth / 2;
                let top = e.pageY - this.offsetTop - that.oMask.offsetHeight / 2;

                if (left < 0) {
                    left = 0;
                }
                if (top < 0) {
                    top = 0;
                }
                let maxright = this.offsetWidth - that.oMask.offsetWidth;
                if (left > maxright) {
                    left = maxright;
                }
                let maxtop = this.offsetHeight - that.oMask.offsetHeight;
                if (top > maxtop) {
                    top = maxtop;
                }

                let x = oBigBox.offsetWidth * left / that.oMask.offsetWidth;
                let y = oBigBox.offsetHeight * top / that.oMask.offsetHeight;
                //maks左顶点      等于 鼠标移动的X轴 减去小盒子的左边 现在鼠标到左顶点 再减去mask自身宽的的一半  鼠标就在中间
                that.oMask.style.left = left + "px";
                //maks上顶点      等于 鼠标移动的Y轴 减去小盒子的上边 现在鼠标到左顶点 再减去mask自身高的的一半  鼠标就在中间
                that.oMask.style.top = top + "px";
                that.oBigBox.style.backgroundPositionX = -x + "px";
                that.oBigBox.style.backgroundPositionY = -y + "px";
            }
        }
        eventBind() {
            this.onmouseover();
            this.onmouseout();
            this.onmousemove();
        }
    }

    let oSmallBox = document.querySelector("#small-box");
    let oMask = document.querySelector("#mask");
    let oBigBox = document.querySelector("#big-box");
    let mf = new MF(oSmallBox, oMask, oBigBox);



    let oli = document.getElementsByTagName("li");
    for (let i = 0; i < oli.length; i++) {
        oli[i].addEventListener("mouseover", function () {


            //给每个Li标签添加 class类名  active
            for (let j = 0; j < oli.length; j++) {

                oli[j].className = "";
            }

            this.className = "active";



            // oSmallBox.style.backgroundImage = `url(./../day17/img/4.webp)`;

            // oBigBox.style.backgroundImage = `url(./../day17/img/4.jpg)`;


        })
    }
    $.ajax({
        url: "../php/bigimg.php",
        dataType: "json",
        success(data) {
            console.log(data)
            data.forEach(Element => {
                let item = `
         <li>
         <img src="${Element.userImg}">
         </li>
      `
                $(".active").append(item);
            })
        }
    })
</script>